<template>
  <div class="box">
    <!-- 头部搜索框 -->
    <van-search
      placeholder="输入搜索的文章内容"
      background="#3196fa"
      show-action
      @cancel="cancel"
      @input="suggestion"
      v-model="keyword"
    />

    <!-- 第一部分-联想搜索建议 -->
    <van-list class="suggestion" v-show="flag == 2">
      <van-cell
        icon="search"
        v-for="(item, index) in suggestionList"
        :key="index"
        @click="search(item)"
      >
        <div slot="title" v-html="highLight(item)"></div>
      </van-cell>
    </van-list>
    <!-- 第一部分-搜索结果 -->
    <van-list class="search" v-show="flag == 3">
      <van-cell
        :title="item.title"
        v-for="(item, index) in searchList"
        :key="index"
        @click="$router.push(`/article/detail/${item.art_id}`)"
      />
    </van-list>
    <!-- 第一部分-历史记录 -->
    <van-list class="history" v-show="flag == 1">
      <!-- 历史记录头部信息 -->
      <van-cell title="历史记录">
        <template #right-icon>
          <van-icon
            name="delete-o"
            size="20"
            @click="$store.commit('clearHistory')"
          />
        </template>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in $store.state.history"
        :key="index"
      />
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 1, //历史记录的状态
      keyword: "", //搜索关键字
      //搜索建议的结果数据
      suggestionList: [],
      //搜索结果的列表
      searchList: [],
    };
  },
  methods: {
    //点击取消按钮触发的事件
    cancel() {
      this.$router.go(-1);
    },
    //显示搜索建议的方法
    suggestion() {
      //判断搜索框的内容是否为空
      if (this.keyword == "") {
        this.flag = 1; //
        return false;
      }
      //请求搜索建议的接口地址
      this.$axios.get("/v1_0/suggestion?q=" + this.keyword).then((res) => {
        console.log(res.data.options);
        //先把数据赋给联想建议的数据列表
        this.suggestionList = res.data.options;
        //显示联想建议搜索结果
        this.flag = 2;
      });
    },

    //搜索建议的显示方法
    search(item) {
      //先把数据添加到历史记录中去
      this.$store.commit("addHistory", item);
      //请求搜索结果的接口地址
      this.$axios.get("/v1_0/search?q=" + item).then((res) => {
        console.log(res);
        //先把数据赋给搜索列表data值
        this.searchList = res.data.results;
        //显示搜索结果
        this.flag = 3;
        this.keyword = item;
      });
    },

    //高亮替换字符串的方法
    highLight(string) {
      //1. 定义正则表达式
      let reg = new RegExp(this.keyword, "gi");

      //2. 开始干正事了哈，替换了
      return string.replace(
        reg,
        `<span style="color:red">${this.keyword}</span>`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  background: #f0f0f0;
  min-height: 500px;
}
</style>